<template>
	<view class="pages">
		<view class="body">
			<view class="title">{{$t('login.captcha.Enter')}}</view>
			<view class="text">{{$t('login.captcha.Sent')}} <text>+{{form.phone_ex}} {{form.phone}}</text></view>
			<view class="getCode">
				<getCode :num="4" @inputCode="login" v-if="form.keywords=='login'"></getCode>
				<getCode :num="4" @inputCode="toNew" v-else></getCode>
			</view>
			<view class="flex">
				<view>
					<text v-if="countdownShow" style="color: gray;">{{$t('login.captcha.Resend')}}（{{num}}）</text>
					<text v-else style="color: #00C2C2;" @click="getCode">{{$t('login.captcha.Resend')}}</text>
				</view>
				<view @click="openPopup">{{$t('login.captcha.Can')}}</view>
			</view>
		</view>
		<uni-popup ref="popup">
			<view class="popup-content">
				<uni-icons type="closeempty" color="grey" class="popup-icon" @click="closePopup"></uni-icons>
				<view class="popup-title">{{$t('login.captcha.Verification')}}</view>
				<view class="popup-text">
					<view>1.{{$t('login.captcha.Please')}}</view>
					<view>2.{{$t('login.captcha.Check')}}</view>
					<view>3.{{$t('login.captcha.Try')}}</view>
					<view>4.{{$t('login.captcha.Contact')}}</view>
				</view>
				<view class="popup-btn" @click="closePopup">{{$t('login.captcha.Got')}}</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		sendSms,
		login
	} from '@/api/api.js'
	export default {
		data() {
			return {
				loginShow: true,
				form: {},
				num: 60,
				countdownShow: true,
			};
		},
		onLoad(option) {
			this.form = JSON.parse(option.form)
			this.getCode()
		},
		methods: {
			openPopup() {
				this.$refs.popup.open('bottom')
			},
			closePopup() {
				this.$refs.popup.close()
			},
			// 获取短信
			getCode() {
				sendSms({
					phone: this.form.phone,
					phone_ex: this.form.phone_ex,
					event: this.form.keywords
				}).then(res => {
					uni.showToast({
						title: this.$t('login.captcha.Verify'),
						icon: "none"
					})
					this.countdownShow = true
					this.getNum()
					if (!!res.data.data.code) {
						this.form.code = res.data.data.code
					} else {
						return
					}
				})
			},
			// 倒计时
			getNum() {
				let time = setInterval(() => {
					this.num--
					if (this.num == -1) {
						clearTimeout(time);
						this.countdownShow = false
						this.num = 60
					}
				}, 1000)
			},
			// 登录
			login(e) {
				login({
					type: '1',
					phone_ex: this.form.phone_ex,
					phone: this.form.phone,
					code: this.form.code || e
				}).then(res => {
					uni.setStorageSync('token', res.data.data.token)
					setTimeout(() => {
						uni.reLaunch({
							url: "/pages/shop/index/index?frist=1"
						})
					}, 600)
				})
			},
			toNew(e) {
				this.form.code = this.form.code || e
				uni.navigateTo({
					url: `/pages/shop/login/newPassword?form=${JSON.stringify(this.form)}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.body {
		width: 85%;
		margin: 80rpx auto;

		.title {
			font-size: 46rpx;
		}

		.text {
			margin: 30rpx 0 60rpx;
			color: gray;

			&>text {
				color: #000;
				margin-left: 10rpx;
			}
		}

		.getCode {
			position: relative;
			left: -40rpx;
		}

		.flex {
			margin-top: 60rpx;
			display: flex;
			justify-content: space-between;
		}
	}

	.popup-content {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 40rpx;
		position: relative;

		.popup-icon {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}

		.popup-title {
			font-size: 36rpx;
			text-align: center;
			font-weight: bold;
		}

		.popup-text {
			margin: 20rpx 0 40rpx;
			color: gray;
		}

		.popup-btn {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 6rpx;
			margin-bottom: 20rpx;
			background-color: #00C2C2;
			color: #fff;
		}
	}
</style>